﻿<!DOCTYPE html>
<html lang="UTF-8">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">

  <link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="static/css/font-awesome.min.css">
  <link rel="stylesheet" href="static/css/main.css">
  <link rel="stylesheet" href="static/css/doc.min.css">
  <link rel="stylesheet" href="static/ztree/zTreeStyle.css">
  <link rel="stylesheet" href="static/sweetalert/sweetalert2.min.css">
  <style>
    .tree li {
      list-style-type: none;
      cursor: pointer;
    }
  </style>
</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <div><a class="navbar-brand" style="font-size:32px;" href="#">众筹平台 - 许可维护</a></div>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li style="padding-top:8px;">
          <div class="btn-group">
            <button type="button" class="btn btn-default btn-success dropdown-toggle"
                    data-toggle="dropdown">
              <i class="glyphicon glyphicon-user"></i> <span id="loginName"></span> <span
                class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#"><i class="glyphicon glyphicon-cog"></i> 个人设置</a></li>
              <li><a href="#"><i class="glyphicon glyphicon-comment"></i> 消息</a></li>
              <li class="divider"></li>
              <li><a href="index.html"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>
            </ul>
          </div>
        </li>
        <li style="margin-left:10px;padding-top:8px;">
          <button type="button" class="btn btn-default btn-danger">
            <span class="glyphicon glyphicon-question-sign"></span> 帮助
          </button>
        </li>
      </ul>
      <form class="navbar-form navbar-right">
        <input type="text" class="form-control" placeholder="Search...">
      </form>
    </div>
  </div>
</nav>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-2 sidebar">
      <div class="tree">
        <ul style="padding-left:0px;" class="list-group" id="permissionTree">
          <li class="list-group-item tree-closed">
            <a href="main.html"><i class="glyphicon glyphicon-dashboard"></i> 控制面板</a>
          </li>

        </ul>
      </div>
    </div>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

      <div class="panel panel-default">
        <div class="panel-heading"><i class="glyphicon glyphicon-th-list"></i> 权限菜单列表
          <div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal"><i
              class="glyphicon glyphicon-question-sign"></i></div>
        </div>
        <div class="panel-body">
          <ul id="permissionZTree" class="ztree"></ul>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span
            aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">帮助</h4>
      </div>
      <div class="modal-body">
        <div class="bs-callout bs-callout-info">
          <h4>没有默认类</h4>
          <p>警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您要使用一种有意义的警告类。目前提供了成功、消息、警告或危险。</p>
        </div>
        <div class="bs-callout bs-callout-info">
          <h4>没有默认类</h4>
          <p>警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您要使用一种有意义的警告类。目前提供了成功、消息、警告或危险。</p>
        </div>
      </div>
      <!--
      <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
      </div>
      -->
    </div>
  </div>
</div>


<!-- 删除Modal -->
<div class="modal fade modal-center" id="deleteModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" style="text-align: center">
        <h4 class="modal-title">删除提示</h4>
      </div>
      <div class="modal-body" style="text-align: center">
        <h2 id="delete-h2"></h2>
      </div>
      <div class="modal-footer" style="text-align: center">
        <button type="button" class="btn btn-primary btn-lg"
                style="margin-right: 120px" data-dismiss="modal">关闭
        </button>
        <button type="button" class="btn btn-warning btn-lg" id="delete-btn">删除</button>
      </div>
    </div>
  </div>
</div>



<!--新增模态框-->
<div class="modal fade modal-center" id="addModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">新增权限</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="permissionName" class="control-label">权限名称</label>
            <input type="text" class="form-control" id="permissionName">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="add-save-btn">保存</button>
      </div>
    </div>
  </div>
</div>



<!--修改模态框-->
<div class="modal fade modal-center" id="updateModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">修改权限</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="permissionName" class="control-label">修改的权限名称</label>
            <input type="text" class="form-control" id="updatePermissionName">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="update-save-btn">保存</button>
      </div>
    </div>
  </div>
</div>

<script src="static/jquery/jquery-2.1.1.min.js"></script>
<script src="static/bootstrap/js/bootstrap.min.js"></script>
<script src="static/script/docs.min.js"></script>
<script src="static/ztree/jquery.ztree.all-3.5.min.js"></script>
<script src="static/sweetalert/sweetalert2.min.js"></script>
<script type="text/javascript">
  var setting;
  $(function () {


    //发送ajax请求获取用户名
    $.ajax({
      url: "/permission/user/getName",
      type: "POST",
      success: function (result) {
        if (result.code === 1) {
          $("#loginName").append(result.content.loginName);
        }
      }
    });

    //发送ajax请求获取权限列表
    $.ajax({
      url: "/permission/user/getAuthority",
      type: "POST",
      success: function (result) {
        if (result.code === 1) {
          var permissionList = result.content.permissionList;
          $.each(permissionList, function (index, item) {
            var childrenNumber = 0;
            var childrenPermission = item.childrenPermissions;
            var nameSpan = $("<span></span>");
            nameSpan.append($("<i></i>")).addClass(item.icon);
            nameSpan.append($("<span></span>")).append(" " + item.name);
            var ul = $("<ul></ul>").css({"margin-top": "10px", "display": "block"});
            var bigLi = $("<li></li>").addClass("list-group-item");
            if (!(item.name === "权限管理")) {
              bigLi.addClass("tree-closed");
              ul.css({"display": "none"});
            }
            $.each(childrenPermission, function (index2, item2) {
              childrenNumber++;
              var a = $("<a></a>");
              if (item2.name === "许可维护") {
                a.attr("href", item2.url).css("color", "red");
              } else {
                a.attr("href", item2.url);
              }
              var li = $("<li></li>").css("height", "30px");
              var i = $("<i></i>").addClass(item2.icon);
              var childNameSpan = $("<span></span>").append(" " + item2.name);
              a.append(i).append(childNameSpan);
              li.append(a);
              ul.append(li);
            });
            var childrenNumberSpan = $("<span></span>").addClass("badge").append(childrenNumber);
            nameSpan.append("   ").append(childrenNumberSpan);

            bigLi.append(nameSpan).append(ul).appendTo("#permissionTree");
          })
        }
      }
    });


    var permissionZTree;

      setting = {
        check: {
          enable: true
        },
        data: {
          simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "pid",
            rootPId: 0
          },
          key: {
            url: "none"
          }
        },
        view: {
          addDiyDom: addIcon,
          addHoverDom: function (treeId, treeNode) {
            //console.log(treeNode);
            var aObj = $("#" + treeNode.tId + "_a"); // tId = permissionTree_1, ==> $("#permissionTree_1_a")
            aObj.attr("permissionid",treeNode.id);
            aObj.attr("href", "javascript:;");
            if (treeNode.editNameFlag || $("#btnGroup" + treeNode.tId).length > 0) {
              return;
            }
            var s = '<span id="btnGroup' + treeNode.tId + '">';
            if (treeNode.level === 0) {
              s += '<a class="btn btn-info dropdown-toggle btn-xs edit-btn" style="margin-left:10px;padding-top:0;"  href="#" title="修改权限信息">&nbsp;&nbsp;<i class="fa fa-fw fa-edit rbg "></i></a>';
              s += '<a class="btn btn-info dropdown-toggle btn-xs add-btn" style="margin-left:10px;padding-top:0;" href="#" >&nbsp;&nbsp;<i class="fa fa-fw fa-plus rbg "></i></a>';
            } else if (treeNode.level === 1) {
              s += '<a class="btn btn-info dropdown-toggle btn-xs edit-btn" style="margin-left:10px;padding-top:0;"  href="#" title="修改权限信息">&nbsp;&nbsp;<i class="fa fa-fw fa-edit rbg "></i></a>';
              //如果没有子节点增加删除按钮
              if (treeNode.childrenPermissions.length === 0) {
                s += '<a class="btn btn-info dropdown-toggle btn-xs delete-btn" style="margin-left:10px;padding-top:0;" href="#" >&nbsp;&nbsp;<i class="fa fa-fw fa-times rbg "></i></a>';
              }
            }

            s += '</span>';
            aObj.after(s);
            $
          },
          removeHoverDom: function (treeId, treeNode) {
            $("#btnGroup" + treeNode.tId).remove();
          }
        }
      };
      $.getJSON("/permission/permission/getAllPermission",function (result) {
        //打开父节点
        $.each(result,function () {
          if (this.pid === 0) {
            this.open=true;
          }
        });
        //初始化zTree
        permissionZTree=$.fn.zTree.init($("#permissionZTree"), setting, result);
      });


  });


  //定义自定义添加的icon
  function addIcon(treeId,treeNode){
    $("#"+treeNode.tId+"_ico").removeClass().addClass(treeNode.icon);
  }

  //使模态框垂直居中
  function centerModals() {
    $('.modal-center').each(function (i) {
      var $clone = $(this).clone().css('display', 'block').appendTo('body');
      var top = Math.round(($clone.height() - $clone.find('.modal-content').height() - 200) / 2);
      top = top > 0 ? top : 0;
      $clone.remove();
      $(this).find('.modal-content').css("margin-top", top);
    });
  }

  //权限下拉
  $(document).on("click", ".list-group-item", function () {
    if ($(this).find("ul")) {
      $(this).toggleClass("tree-closed");
      if ($(this).hasClass("tree-closed")) {
        $("ul", this).hide("fast");
      } else {
        $("ul", this).show("fast");
      }
    }
  });

  //弹出删除模态框
  var toDeletePermissionId;
  $(document).on("click",".delete-btn",function () {
    var deleteModal = $('#deleteModal');
    deleteModal.on('show.bs.modal', centerModals);
    deleteModal.modal({
      backdrop: 'static'
    });
    //适应窗口大小变化
    $(window).on('resize', centerModals);
    //获取要删除的权限id
    toDeletePermissionId=$(this).parent().prev().attr("permissionid");
    //获取权限名称名
    var deletePermissionName = $(this).parent().prev().attr("title");
    //清空
    var delete_h2 = $("#delete-h2");
    delete_h2.empty();
    delete_h2.append("您是否要删除权限").append($("<h3></h3>").append(deletePermissionName));
  });

  //触发删除模态框的删除按钮
  $(document).on("click","#delete-btn",function () {
    $.ajax({
      url: "/permission/permission/"+toDeletePermissionId,
      type: "DELETE",
      success: function (result) {
        if (result.code===1) {
          swal(
              '删除成功',
              'success'
          );
          $("#deleteModal").modal("hide");
          $.getJSON("/permission/permission/getAllPermission",function (result) {
            //打开父节点
            $.each(result,function () {
              if (this.pid === 0) {
                this.open=true;
              }
            });
            //初始化zTree
            permissionZTree=$.fn.zTree.init($("#permissionZTree"), setting, result);
          });
        } else if (result.code === 0) {
          swal(
              '删除失败',
              'error'
          );
          //关闭模态框
          $("#deleteModal").modal("hide");
        }
      }
    })
  });

  var addPId;
  //触发新增模态框
  $(document).on("click", ".add-btn", function () {
    addPId=$(this).parent().prev().attr("permissionid");
    $("#permissionName").val("");
    var addModal = $('#addModal');
    addModal.on('show.bs.modal', centerModals);
    addModal.modal({
      backdrop: 'static'
    });
    //适应窗口大小变化
    $(window).on('resize', centerModals);
  });

  //新增保存按钮ajax请求
  $(document).on("click","#add-save-btn",function () {
    var permissionName=$("#permissionName").val();
    $.ajax({
      url: "/permission/permission/add",
      type: "POST",
      data: {
        pid:addPId,
        name:permissionName
      },
      success:function (result) {
        if (result.code===1){
          swal(
              '处理成功',
              'success'
          );
          $("#addModal").modal('hide');
          window.location.reload();
        }
      }
    })
  });

  var editId;
  //触发修改模态框
  $(document).on("click",".edit-btn",function () {
    editId=$(this).parent().prev().attr("permissionid");
    $("#updatePermissionName").val("");
    var updateModal = $("#updateModal");
    updateModal.on('show.bs.modal', centerModals);
    updateModal.modal({
      backdrop: 'static'
    });
    //适应窗口大小变化
    $(window).on('resize', centerModals);
  });

  //触发修改保存按钮
  $(document).on("click","#update-save-btn",function () {
    var permissionName=$("#updatePermissionName").val();
    $.ajax({
      url: "/permission/permission/update",
      type: "POST",
      data: {
        id:editId,
        name:permissionName
      },
      success:function (result) {
        if (result.code === 1) {
          swal(
              '修改成功',
              'success'
          );
          $("#updateModal").modal("hide");
          window.location.reload();
        }
      }
    })
  })





</script>
</body>
</html>
